<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>系统登录 - 食堂缴费系统</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		/*登录页面*/
		.login_bg {
			background: url("./images/loginBg.jpg") 0 0 repeat-x;
		}

		.loginBox {
			width: 1000px;
			margin: 0 auto;
			background: url("./images/login_bg.jpg") 0 0 no-repeat;
		}

		.loginHeader {
			padding-top: 102px;
			text-align: center;
			padding-bottom: 30px;
		}

		.loginHeader h1 {
			color: #fff;
			text-shadow: 2px 2px #000;
		}

		.loginCont {
			width: 388px;
			height: 284px;
			/*border: 1px solid red ;*/
			margin: 0 auto;
		}

		.formBox {
			position: relative;
		}

		/*输入框里默认输入字体*/
		::-webkit-input-placeholder {
			color: rgb(190, 188, 188);
			/*font-style: italic;*/
		}

		input:-moz-placeholder,
		textarea:-moz-placeholder {
			color: rgb(190, 188, 188);
			font-style: italic;
		}

		input {
			outline: none;
		}

		.loginForm {
			background: url("./images/formBg.png") 0 0 no-repeat;
			width: 320px;
			height: 140px;
			border-radius: 8px;
			padding: 90px 38px 48px 30px;
			/*border: 1px solid green;*/
		}

		.loginForm label {
			width: 20%;
			display: inline-block;
		}

		.inputBox {
			margin-bottom: 20px;
		}

		.info {
			position: absolute;
			margin-top: -20px;
			font-size: 12px;
			color: red;
			font-weight:bold;
		}

		.inputBox input {
			width: 66%;
			padding: 10px 5px 10px 20px;
			border: 1px solid rgb(178, 178, 178);
			border-radius: 3px;
			-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
			-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
			box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;

		}

		/*输入框得到焦点的效果*/
		.inputBox input:active, .providerAdd input:focus,
		.inputBox input:focus {
			border: 1px solid rgba(91, 90, 90, 0.7);
			background: rgba(238, 236, 240, 0.2);
			-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
			-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
			box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
		}

		.subBtn {
			margin-left: 70px;
		}

		/*/!*登录页登录和重置按钮*!/.providerView a是供应商管理页面下信息查看也得返回按钮的样式*/
		input[type='submit'], input[type='reset'], .providerView a {
			width: 30%;
			cursor: pointer;
			background: #54a4d7;
			padding: 6px 18px;
			font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
			color: #fff;
			font-size: 18px;
			border: 1px solid #4682be;
			margin-bottom: 10px;
			margin-right: 22px;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			-webkit-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
			0px 0px 0px 3px rgb(254, 254, 254),
			0px 5px 3px 3px rgb(210, 210, 210);
			-moz-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
			0px 0px 0px 3px rgb(254, 254, 254),
			0px 5px 3px 3px rgb(210, 210, 210);
			box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
			0px 0px 0px 3px rgb(254, 254, 254),
			0px 5px 3px 3px rgb(210, 210, 210);

		}

		input[type='submit']:hover, input[type='reset']:hover {
			background: rgb(74, 179, 198);
		}

		input[type='submit']:active, input[type='submit']:focus,
		input[type='reset']:active, input[type='reset']:focus, .providerView a:hover, .providerView a:active {
			background: #2a5989;
			border: 1px solid rgb(12, 76, 87);
			-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
			-moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
			box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
		}
	</style>
</head>
<body class="login_bg">
<section class="loginBox">
	<header class="loginHeader">
		<h1>食堂缴费系统</h1>
	</header>
	<section class="loginCont">
		<form class="loginForm" role="form" action="/login" id="from1" method="post" >
			<div class="inputBox">
				<label >用户名：</label>
				<input type="text" class="input-text" id="userID" placeholder="请输入名字" name="userName" required/>
			</div>
			<div class="inputBox">
				<label >密码：</label>
				<input type="password" id="password" placeholder="请输入密码" name="password" required/>
			</div>
			<div class="subBtn">
				<div class="info">${error }</div>
				<input type="submit" value="登录"/>
				<input type="reset" value="重置"/>
			</div>
		</form>
	</section>
</section>
</body>
</html>